<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-重要概念(flex Layout - Important Concepts)</title>
  <!-- 
    CSS中的flex布局（Flexbox）是一种强大的布局模型，可以灵活地对元素进行排列和对齐。
    flex布局中的一些重要概念和属性： 
 
      1. 主轴和交叉轴：flex容器具有主轴和交叉轴。主轴是flex项目排列的方向，可以是水平方向（row）或垂直方向（column）。交叉轴是与主轴垂直的方向。 
      2. flex容器和flex项目：通过设置display: flex;或display: inline-flex;可以将一个元素设置为flex容器，其直接子元素即为flex项目。 
      3. 主轴对齐和交叉轴对齐：通过justify-content属性可以设置主轴上的对齐方式，通过align-items和align-self属性可以设置交叉轴上的对齐方式。 
      4. flex属性：通过设置flex属性可以控制flex项目在flex容器中的占比，可以灵活地分配空间。 
      5. flex-wrap属性：控制flex项目是否换行显示，可设置为nowrap（不换行）、wrap（换行）或wrap-reverse（反向换行）。 
      6. order属性：通过设置order属性可以改变flex项目的排列顺序，数值越小越靠前。 
      7. flex-grow、flex-shrink和flex-basis属性：分别控制flex项目的增长、收缩和初始大小。

    补充: 主轴(main axis), 交叉轴(cross axis)
   -->
   <style>
     .display-flex {
       display: flex;
       background-color: skyblue;

       /* 控制flex项目是否换行显示 */
       /* flex-wrap: wrap; */

       width: 400px;
       height: 200px;
     }

     .item {
       width: 120px;
       height: 100px;
     }
   </style>
</head>
<body>

  <div class="display-flex">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  
  <script src="./js/itemRandomColor.js"></script>
</body>
</html>